@charset "utf-8";
/* CSS Document */
body{
	/*background-color:#ececec;*/
}
.limited{ display: none;}
	
.banner{
	/*background-image: url("../images/banner/1.png");*/
	height: 620px;
	/*background-position: center center;*/
}

@media only screen and (max-width:480px) {
	.banner{ height: 240px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	.banner{ height: 400px;}
}
@media only screen and (min-width:1025px) {
}




.pageBody {
}

@media only screen and (max-width:480px) {
	.pageBody { height: auto;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
}



.module{ background-repeat: no-repeat; background-position: center center;}
.module .titleBar{}
.module .titleBar .columnName{ font-size: 40px; color: #A0A0A0; display: block}
.module .titleBar .slaveColumnName{ font-size: 70px; display: block; font-weight: bold;text-transform:uppercase}
.module .content{}
.module .more{ width: 160px; height: 50px; background-color: #3399d6; color: #fff; display: block; text-align: center; line-height: 50px;font-size: 18px;}

.more.more1{background-image: linear-gradient( to right,#0080CC,#68C3EE); border-radius:0 30px 30px 0;}

@media only screen and (max-width:480px) {
	.module .titleBar .columnName{ font-size: 20px;}
	.module .titleBar .slaveColumnName{ font-size: 35px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	.module .titleBar .columnName{ font-size: 20px;}
	.module .titleBar .slaveColumnName{ font-size: 35px;}
}
@media only screen and (min-width:1025px) {
}








#about{ padding-top: 80px;}
#about .wrapper{ display: flex;flex-wrap: wrap; justify-content: space-around}
#about .wrapper > div{ width: 50%;}
#about .focus{ max-width: 660px; height: 350px; background-color: #eee; margin: auto; width: 95%;}
#about .titleBar{ max-width: 660px;margin: 0 20px;}
#about .content{margin: auto;margin: 0 20px;}
#about .content p{ font-size: 14px; line-height: 24px; color: #666;}
#about .more{ margin-top: 30px; margin-left: 20px;  }



@media only screen and (max-width:480px) {
	#about{ padding-top: 40px;}
	#about .wrapper > div{ width: 100%;}
	#about .titleBar{ padding-top: 20px;margin-left: 0px;}
	#about .content{margin: auto;margin-left: 0px;}
	#about .more{margin-left: 0px;}
	
	#about .focus{height: 250px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width : 1025px) and (max-width : 1399px) {
}
@media only screen and (min-width:1400px) {
}






#links{ background-color: #f5f5f5; margin-top: 80px;}
#links .wrapper{ width: 100% }
#links ul{ display: flex; flex-wrap: wrap;justify-content:center;}
#links li{ width: 19.5%; height: 250px; border-left: solid 2px #fff;border-right: solid 2px #fff;}
#links li a{ width:100%; height:190px; display:block; text-align: center; padding-top: 60px;}
#links li .icon{ display:block; width:80px; height:80px; margin:auto; margin-bottom: 10px; background-position: center center; background-repeat: no-repeat;}
#links li .columnName{ display: block; font-size: 18px; margin-bottom: 10px}
#links li .slaveColumnName{font-size: 20px; display: block; color: #444444;}
#links li a:hover{ background-color: #0080cc; color: #fff}
#links li a:hover .slaveColumnName{ color: #fff}


@media only screen and (max-width:480px) {
	#links{ margin-top: 40px;}
	#links li{ width: 32%; height: 200px;}
	#links li a{height: 160px; padding-top: 40px;}
	#links li .columnName{ font-size: 14px;}
	#links li .slaveColumnName{font-size: 12px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#links li .columnName{ font-size: 14px;}
	#links li .slaveColumnName{font-size: 12px;}
}
@media only screen and (min-width:1025px) {
}





#link_1 .icon{ background-image: url("../images/links/s01.png");}
#link_2 .icon{ background-image: url("../images/links/s02.png");}
#link_3 .icon{ background-image: url("../images/links/s03.png");}
#link_4 .icon{ background-image: url("../images/links/s04.png");}
#link_5 .icon{ background-image: url("../images/links/s05.png");}

#link_1:hover .icon{ background-image: url("../images/links/s001.png");}
#link_2:hover .icon{ background-image: url("../images/links/s002.png");}
#link_3:hover .icon{ background-image: url("../images/links/s003.png");}
#link_4:hover .icon{ background-image: url("../images/links/s004.png");}
#link_5:hover .icon{ background-image: url("../images/links/s005.png");}



#product{}
#product .wrapper{ display: flex; justify-content: space-between; height: 160px; padding-top: 40px}
#product .titleBar{}
#product .catalog{margin-top: 70px; width: 190px; height: 45px;line-height: 45px; background-color: #0080cc;}
#product .content{ display: flex;flex-wrap: wrap;}
#product .cate{ width: 50%; height: 460px; position: relative; overflow: hidden;}
#product .cate .wrapper{ display: block; width:550px; z-index: 200}
#product .cate h4{ font-size: 60px; font-weight: normal; color: #fff; margin-top: 60px; line-height: 1.5em;}
#product .cate p{ font-size:16px; color: #fff; line-height: 2em;height: 110px;}

#product .cate:hover .more.more1{ background-color: #fff; color: #0080cc; background: none; background-color: #fff}

#product .cate .bg{width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 100; transition: all 0.5s; transform: scale(1.0);}
#product .cate:hover .bg{ transform: scale(1.05);}

#product #cate_1 .bg{ background-image:url("../images/product/1.jpg"); background-position: center center; background-size: cover;}


#product #cate_2 .bg{ background-image:url("../images/product/2.jpg"); background-position: center center; background-size: cover;}




@media only screen and (max-width:480px) {
	#product .wrapper{ height: 100px;}
	#product .titleBar{ margin-left: 0px}
	#product .catalog{width: 140px; margin-top: 25px;}
	#product .cate{ width:100%;}
	
	#product #cate_1 .wrapper{margin-left: 20px; width: 85%;}
	#product #cate_2 .wrapper{margin-left: 20px; width: 85%;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#product .wrapper{ height: 100px;}
	#product .titleBar{ margin-left: 0px}
	#product .catalog{width: 140px; margin-top: 25px;}
	#product .cate{ width:100%;}
	
	#product #cate_1 .wrapper{margin-left: 20px; width: 85%;}
	#product #cate_2 .wrapper{margin-left: 20px; width: 85%;}
}
@media only screen and (min-width:1025px) {
}
@media only screen and (min-width : 1025px) and (max-width : 1399px) {
}
@media only screen and (min-width:1400px) {
	#product #cate_1 .wrapper{margin-right: 100px;}
	#product #cate_2 .wrapper{margin-left: 100px;}
}









#news{ background-color: #f5f5f5;}
#news .titleBar{padding-top: 30px; margin-right: 50px; padding-top: 20px;}
#news .columnName{  text-align: right}
#news .slaveColumnName{ text-align: right}
#news .wrapper{}
#news .wrapper{ padding-top: 90px; justify-content: space-between;}
#news .content{ width:100%; overflow: hidden; position: relative;}
#news ul{ width: 200%; transition: all 0.5s; position: absolute; left: 0; top: 0;flex-wrap: wrap;}

#news li{ width:33.33%; height:240px; background-color: #fff; padding: 25px; display: flex; flex-direction: column; margin-bottom: 20px}
#news .title{ color: #007FCC; text-align: left; font-size: 16px; width: 100%; order: 2; height: 60px; line-height: 30px; padding: 10px 0;}
#news .preview{ display: none;}
#news .description{ display: block; width: 100%; order: 3; flex-grow: 1}
#news .updateDate{ display: block; order: 1; padding-top: 10px;}

#news .updateDate .day{ font-size: 42px; color:#0080CC; font-weight: bold; font-style: italic;}
#news .updateDate .yearAndMonth{}

#news .moveButtonGroup{ float: right;}

#news.focus_0 ul{left: -0%;}
#news.focus_1 ul{left: -100%;}


@media only screen and (max-width:480px) {
	#news li{ width:40%;}
	#news .wrapper{ padding-top: 30px;}
	#news .titleBar{ padding-bottom: 60px; margin-right: 10px;}
	#news .content{ height: 1000px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#news li{ width:40%;}
	#news .wrapper{ padding-top: 30px;}
	#news .titleBar{ padding-bottom: 60px; margin-right: 10px;}
	#news .content{ height: 1000px;}
}
@media only screen and (min-width:1025px) {
	#news{ height: 460px;}
	#news .wrapper{ padding-top: 90px;}
	#news .wrapper{ display: flex; flex-direction: row-reverse}
	#news .content{height: 290px;}
}
@media only screen and (min-width : 1025px) and (max-width : 1399px) {
	#news li{ width:220px;}
}
@media only screen and (min-width:1400px) {
	#news li{ width:270px;}
	#news .content{ margin-left: 50px;width:1020px;}
}







#cert{ background-image: url("../images/cert/bg.jpg"); background-size: cover;}
#cert .titleBar{padding-top: 30px; padding-left: 40px;}
#cert .columnName{ color: #fff}
#cert .slaveColumnName{ color: #fff}

#cert .content{width: 100%; overflow: hidden; height:400px; padding-top: 20px; position: relative;}
#cert ul{ width: 200%; transition: all 0.5s; position: absolute; left: 0; top: 0;}
#cert li{ width: 8.3%}
#cert .preview{ width: 200px; height: 300px;}
#cert .title{color:#fff; line-height: 1.5em; padding-top: 20px}


#cert .moveButtonGroup{ margin-top: 10px;}
#cert .moveButtonGroup .button{ color: #fff;}

#cert.focus_0 ul{left: -0%;}
#cert.focus_1 ul{left: -100%;}


@media only screen and (max-width:480px) {
	#cert li{ width: 25%}
	#cert .preview{ width: 150px; height: 240px;}
	#cert .content{height:1000px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#cert li{ width: 25%}
	#cert .preview{ width: 200px; height: 300px;}
	#cert .content{height:1200px;}
}
@media only screen and (min-width:1025px) {
	#cert{ height: 600px;}
	#cert .titleBar{ display: flex;}
	#cert .moveButtonGroup{ margin-top: 80px; margin-left: 20px;}
}
@media only screen and (min-width : 1025px) and (max-width : 1399px) {
	#cert{ height: 520px;}
	#cert .preview{ width: 180px; height: 260px;}
}
@media only screen and (min-width:1400px) {
	#cert{ height: 600px;}
}





#contact{
	background-image: url("../images/contact/bg.jpg");
}
#message{ height: 490px; }

#message{ height: 350px; padding-top: 20px;}
#message .wrapper{ max-width: 1000px;}
#message .titleBar{ text-align: center; padding-top: 30px; display: none;}

#message li{ padding: 10px 0; max-width: 990px;}
#message label{ display: none;}

#message input{border: none; border: solid 1px #cdcdcd; padding: 0; height: 40px; width: 100%; font-size: 18px;/* max-width: 970px;*/ padding: 0 10px;box-sizing: border-box}
#message textarea{border: none; border: solid 1px #cdcdcd; padding: 0; height:80px; width: 100%; font-size: 18px;/* max-width: 970px;*/ padding: 0 10px; display: block; box-sizing: border-box}
#message input[type=submit]{ background-color: #111111; border: none; color: #fff; width: 100%; cursor: pointer;}




@media only screen and (max-width:480px) {
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	#message .form ul:nth-child(1) li{ width:47%;}
	#message .form ul:nth-child(1){display: flex;justify-content: space-between; max-width: 990px;}
}

@media only screen and (min-width : 1025px) and (max-width : 1399px) {
	#cert{ height: 520px;}
	#cert .preview{ width: 180px; height: 260px;}
}
@media only screen and (min-width:1400px) {
	#message{ height: 350px;}
}



#hr{}
#hr .titleBar{ display: none;}
#hr .wrapper{max-width: 900px;}
#hr p{ font-size: 16px; text-align: center; padding-top: 20px;}
#hr strong{font-size: 46px;}
#hr .more{ margin: auto;margin-top: 20px;}


.moveButtonGroup{ display: flex;}
.moveButtonGroup .button{ width: 40px; height: 40px; border: solid 1px #ccc; border-radius: 50%; display: block; text-align: center; font-size: 20px; line-height: 40px; cursor: pointer; margin-left: 10px;}

.moveButtonGroup .button:hover{ width: 40px; height: 40px; border: solid 1px #0080cc; background-color: #0080cc; color: #fff;}




@media only screen and (max-width:480px) {
	#hr{ padding-bottom: 20px;}
	#hr strong{font-size: 24px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	#hr{ height: 290px;}
}